<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="450"></canvas>
    <script>
        window.onload = function() {
            const canvas = document.getElementById('physicsCanvas');
            const ctx = canvas.getContext('2d');

            // --- Helper function to draw an arrow ---
            function drawArrow(ctx, fromX, fromY, toX, toY) {
                const headlen = 10; // length of head in pixels
                const dx = toX - fromX;
                const dy = toY - fromY;
                const angle = Math.atan2(dy, dx);
                ctx.beginPath();
                ctx.moveTo(fromX, fromY);
                ctx.lineTo(toX, toY);
                ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
                ctx.moveTo(toX, toY);
                ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
                ctx.stroke();
            }

            // --- Drawing parameters ---
            const centerX = 275;
            const tubeRadiusX = 70;
            const tubeTopY = 80;
            const tubeBottomY = 360;
            const liquidSurfaceY = 220;
            const sandTopY = 320;

            ctx.lineWidth = 1.5;
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.font = '18px sans-serif';

            // --- 1. Draw the liquid ---
            ctx.beginPath();
            ctx.moveTo(0, liquidSurfaceY);
            ctx.lineTo(canvas.width, liquidSurfaceY);
            ctx.stroke();

            ctx.save();
            ctx.setLineDash([6, 4]);
            ctx.lineWidth = 1;
            for (let y = liquidSurfaceY + 20; y < canvas.height; y += 15) {
                ctx.beginPath();
                ctx.moveTo(0, y);
                ctx.lineTo(canvas.width, y);
                ctx.stroke();
            }
            ctx.restore();

            // --- 2. Draw the tube outline ---
            ctx.beginPath();
            // Left side
            ctx.moveTo(centerX - tubeRadiusX, tubeTopY);
            ctx.lineTo(centerX - tubeRadiusX, tubeBottomY);
            // Bottom arc
            ctx.arc(centerX, tubeBottomY, tubeRadiusX, Math.PI, 0, false);
            // Right side
            ctx.lineTo(centerX + tubeRadiusX, tubeTopY);
            ctx.stroke();
            // Top ellipse
            ctx.beginPath();
            ctx.ellipse(centerX, tubeTopY, tubeRadiusX, 25, 0, 0, 2 * Math.PI);
            ctx.stroke();

            // --- 3. Draw the sand ---
            ctx.save();
            ctx.fillStyle = '#cccccc';
            ctx.beginPath();
            // Top surface of sand (curved)
            ctx.ellipse(centerX, sandTopY, tubeRadiusX, 15, 0, Math.PI, 2 * Math.PI, false);
            // Bottom part of sand (matches tube bottom)
            ctx.arc(centerX, tubeBottomY, tubeRadiusX, 0, Math.PI, false);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            ctx.restore();

            // --- 4. Draw internal liquid surface ---
            ctx.beginPath();
            ctx.ellipse(centerX, liquidSurfaceY, tubeRadiusX, 22, 0, 0, 2 * Math.PI);
            ctx.stroke();

            // --- 5. Draw the dimension 'h' ---
            const h_line_X = 120;
            ctx.save();
            ctx.setLineDash([5, 5]);
            ctx.lineWidth = 1;
            // Dashed line from surface
            ctx.beginPath();
            ctx.moveTo(h_line_X, liquidSurfaceY);
            ctx.lineTo(centerX - tubeRadiusX - 10, liquidSurfaceY);
            ctx.stroke();
            // Dashed line from bottom
            ctx.beginPath();
            ctx.moveTo(h_line_X, tubeBottomY);
            ctx.lineTo(centerX - tubeRadiusX, tubeBottomY);
            ctx.stroke();
            ctx.restore();

            // Vertical line with arrows for 'h'
            ctx.beginPath();
            ctx.moveTo(h_line_X, liquidSurfaceY);
            ctx.lineTo(h_line_X, tubeBottomY);
            // Top arrowhead
            ctx.moveTo(h_line_X - 5, liquidSurfaceY + 5);
            ctx.lineTo(h_line_X, liquidSurfaceY);
            ctx.lineTo(h_line_X + 5, liquidSurfaceY + 5);
            // Bottom arrowhead
            ctx.moveTo(h_line_X - 5, tubeBottomY - 5);
            ctx.lineTo(h_line_X, tubeBottomY);
            ctx.lineTo(h_line_X + 5, tubeBottomY - 5);
            ctx.stroke();
            
            ctx.font = 'italic 20px serif';
            ctx.fillText('h', h_line_X - 25, (liquidSurfaceY + tubeBottomY) / 2 + 5);
            ctx.font = '18px sans-serif';


            // --- 6. Draw labels and arrows ---
            const labelX = centerX + tubeRadiusX + 40;

            // Tube label
            ctx.fillText('tube, area', labelX, tubeTopY - 10);
            ctx.fillText('of cross-section A', labelX - 10, tubeTopY + 10);
            drawArrow(ctx, labelX + 25, tubeTopY, centerX + tubeRadiusX, tubeTopY);
            
            // Liquid label
            ctx.fillText('liquid, density \u03C1', labelX, liquidSurfaceY + 25);
            drawArrow(ctx, labelX + 50, liquidSurfaceY + 35, centerX + tubeRadiusX + 15, liquidSurfaceY + 5);

            // Sand label
            ctx.fillText('sand', labelX, tubeBottomY - 20);
            drawArrow(ctx, labelX + 20, tubeBottomY - 10, centerX + tubeRadiusX, sandTopY + (tubeBottomY - sandTopY)/2);
            
            // --- 7. Draw Figure Caption ---
            ctx.font = 'bold 18px sans-serif';
            ctx.textAlign = 'center';
            ctx.fillText('Fig. 3.1', centerX, canvas.height - 20);
        };
    </script>
</body>
</html>